import * as PIXI from 'pixi.js'
import { PixiComponent } from '@inlet/react-pixi'

export default PixiComponent('Keypoint', {
  create: () => new PIXI.Graphics(),
  didMount: () => {},
  willUnmount: () => {},
  applyProps: (instance, oldProps, newProps) => {
    instance.clear()
    const {
      edit, label, color, scale, setting,
    } = newProps
    if (label.hide !== true || edit === true) {
      const point = label.exterior
      instance.lineStyle(3 / scale, parseInt(color.substring(1), 16), 1)
      const settingPoint = Object.keys(setting.points).reduce((pre, next, index) => {
        pre[next] = index
        return pre
      }, {})
      setting.lines.forEach((line) => {
        instance.moveTo(point[settingPoint[line[0]]][0], point[settingPoint[line[0]]][1])
        instance.lineTo(point[settingPoint[line[1]]][0], point[settingPoint[line[1]]][1])
        instance.closePath()
      })
    }
  },
})
